<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
  <!--    导入vue-->
  <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
  <!--    ajax异步请求-->
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="app">
  {{ user.id }} <br/>
  {{ user.name }} <br/>
  {{ user.password }} <br/>
  <input v-model="user.name"> <br/>
  <button @click="pre" v-if="hasPreviousPage">上一页</button>
  <button @click="next" v-if="hasNextPage">下一页</button>
</div>
<script>
  //vue数据模型
  const app = {
    data() {
      return {
        urlPrefix: "/mvc",
        //用户对象
        user: {
          id: null,
          name: null,
          password: null,
        },
        //分页数据
        pageNum: 1,
        pageSize: 3,
        //是否有前一页
        hasPreviousPage: true,
        //是否有后一页
        hasNextPage: true,
      }
    },
    //事件方法
    methods: {
      //上一页
      pre() {
        this.pageNum = this.pageNum - 1;
        this.getUser();
      },
      //下一页
      next() {
        this.pageNum = this.pageNum + 1;
        this.getUser();
      },
      //获取用户
      getUser() {
        axios.get(this.urlPrefix + '/user/getAllUsers', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        })
            .then((response)=> {
              //比如 http响应头 状态码 400 500 405 404
              //stringify 将对象转换成json格式
              //parse 将json格式转换成对象
              let value = response.data;
              //{"total":15,"list":[],
              // "pageNum":1,"pageSize":3,"size":3,"startRow":1,"endRow":3,"pages":5,"prePage":0,
              // "nextPage":2,"isFirstPage":true,"isLastPage":false,
              // "hasPreviousPage":false,"hasNextPage":true,"navigatePages":8,"navigatepageNums":[1,2,3,4,5],"navigateFirstPage":1,"navigateLastPage":5}
              alert(JSON.stringify(value));

              this.hasPreviousPage = value.hasPreviousPage;
              this.hasNextPage = value.hasNextPage;
              alert("value.hasPreviousPage"+value.hasPreviousPage);
              alert("value.hasNextPage"+value.hasNextPage);

            })

            .catch(function (error) { // 请求失败处理
              console.log(error);
            });
      },

    }
  }
  //创建一个vue管理的数据模型  绑定html模板视图
  Vue.createApp(app).mount('#app')
</script>
</body>
</html>